﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>酒店管理员登录</title>
    <link href="/resources/hotel/css/style.css" rel="stylesheet" type="text/css"/>
    <script language="JavaScript" src="/resources/hotel/js/jquery.js"></script>
    <script src="/resources/hotel/js/cloud.js" type="text/javascript"></script>
    <script language="javascript">
        $(function () {
            $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
            $(window).resize(function () {
                $('.loginbox').css({'position': 'absolute', 'left': ($(window).width() - 692) / 2});
            })
        });
    </script>
    <style type="text/css">
        .returnPasswordBox li {
            margin-top: 30px;
        }

        .returnPasswordBox input {
            background: rgba(0, 0, 0, 0.3);
        }

        a {
            cursor: pointer;
        }
    </style>

</head>
<body style="background-color:#1c77ac; background-image:url(/resources/hotel/images/light.png); background-repeat:no-repeat; background-position:center top; overflow:hidden;">
<div id="mainBody">
    <div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>
</div>


<div class="logintop">
    <span>欢迎登录酒店管理后台</span>
</div>

<div class="loginbody">
    <div class="loginbox" style="margin-top: 150px;">
        <form action="" method="post">
            <ul>
                <li style="margin-right:30px; "><input name="" type="text" class="loginuser" placeholder="账号"/></li>
                <li style="margin-right:30px; "><input name="" type="password" class="loginpwd" placeholder="密码"/></li>
                <li style="height:15px;font-size: 12px;margin-bottom: 30px;display: none;" id="cheakCodeLi">
                   <input type="text" placeholder="请输入验证码" id="cheakCodeInput" style="float: left;width: 75px;height: 30px;border: #00a4ac 1px solid;"/>
                    <img src="/resources/hotel/images/topright.jpg" style="height: 30px;width: 100px;float: left;margin-left: 20px;" id="cheakCodeImg">
                </li>
                <li><input name="" type="button" class="loginbtn" value="登录"/>
                    <label><a href="#" id="forgotPassword">忘记密码？</a></label>
                    <label style="height:15px;font-size: 12px;display: none;float: right;position: relative;left: -30px;" id="errorMassage">账号或密码错误！</label>
                </li>
            </ul>
        </form>
    </div>
</div>
<div class="loginbm">版权所有 野战部队网站开发工作室 仅供学习交流，勿用于任何商业用途</div>

<div style="width: 800px;height: 300px;position:absolute;top:250px;left:350px;display: none;" id="getBackPasswrodDiv">
    <h1 style="font-size: 20px;">通过绑定的手机找回密码</h1>
    <ul class="returnPasswordBox">
        <li>
            <label> 手机号：</label>
            <input type="text" placeholder="请输入手机号" style="width: 200px;height: 30px;" id="tel">
        </li>
        <li style="margin-left: 52px;" ;>
            <input type="text" style="height: 30px;width: 90px;" id="code">
            <a href="#"><input type="button" value="获取手机验证码" style="height: 30px;width:100px;background:  #3399d5" ;
                               id="getCode"></a>
            <label id="msg_flag" style="font-size: 12px;display: none;">成功发送验证码！请注意查收。 <label id="time">60</label>
                秒后可重新发送</label>
        </li>
        <li style="clear: both;">
            <label> 新密码：</label>
            <input id="newPassword1" type="password" name="password" placeholder="新密码"
                   style="width: 200px;height: 30px;">
        </li>
        <li style="margin-left: -25px;">
            <label>确认新密码：</label>
            <input id="newPassword2" type="password" name="password" placeholder="确认新密码"
                   style="width: 200px;height: 30px;">
        </li>
        <li style="margin-left: 100px;">
            <input id="modifyButton" type="button" value="确认修改"
                   style="font-size:25px;height: 40px;width: 200px;background: #3399d5">
            <label class="backLogin" style="margin-left: 100px;"><a href="#">--返回登录--</a></label>
        </li>
        <li style="display:none;font-size: 12px;color:red;" id="msg2">1</li>
    </ul>
</div>
<script type="text/javascript">
    var errorNum = 0;//密码错误次数
    //管理员登录
    function login() {
        var account = $(".loginuser").val();//账号
        var passwrod = $(".loginpwd").val();//密码
        var cheakcode = $("#cheakCodeInput").val();//图片验证码
        if(account != null && account!=""){
            if(passwrod != null && passwrod!=""){
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/merchantController/merchantLogin",
                    data: {
                        "mUsername": account,
                        "mPassword": passwrod,
                        "verifyCodeActual":cheakcode
                    },
                    dataType:"json",
                    success: function (data) {
                        if(data!=null){
                            if (data.success == true) {
                                console.log("后台响应数据："+data);
                                window.location.href = "http://localhost:8080/hotelManagement/homepage";
                            } else {
                                errorNum++;
                                if(errorNum >= 3){
                                    $("#cheakCodeImg").attr("src","../Kaptcha");
                                    $("#cheakCodeLi").css("display","block");
                                    // $(".loginbtn").click(function (){
                                    //     login();
                                    // });
                                }
                                $("#errorMassage").html(data.errMsg);
                                $("#errorMassage").css("display", "block");
                                $("#errorMassage").css("color", "red");
                                setTimeout(" $('#errorMassage').css('color','black');", 500);
                            }
                        }else {
                            alert("后台响应错误！");
                        }

                    },
                    error: function () {
                        alert("访问错误！");
                    }
                });
            }else {
                alert("密码不能为空！");
            }
        }else {
            alert("账号不能为空！");
        }
    }

    //鼠标点击登录按钮
    $(".loginbtn").click(function () {
        login();
    });

    //回车键登录
    $(function(){
        document.onkeydown = function(e){
            var ev = document.all ? window.event : e;
            if(ev.keyCode==13) {
                login();
            }
        }
    });
</script>
<!--忘记密码的js-->
<script type="text/javascript">
    $("#forgotPassword").click(function () {
        $(".loginbody").css("display", "none");
        $("#getBackPasswrodDiv").css("display", "block");
        $(".backLogin").click(function () {
            $(".loginbody").css("display", "block");
            $("#getBackPasswrodDiv").css("display", "none");
        });
        var status = true;
        //点击获取获取验证码
        $("#getCode").click(function () {
            if (status) {
                getCode();//获取验证码
            }
        });
        //获取验证码的方法
        function getCode() {
            var tel = $("#tel").val();
            alert(tel);
            if (tel != "") {
                var pattern = /^1[34578]\d{9}$/;
                var flag = pattern.test(tel);
                if (flag) {
                    $.ajax({
                        type: "post",
                        data: {
                            "mPhone": tel
                        },
                        url: "http://localhost:8080/merchantController/merchantGetPhoneCode",
                        dataType:"json",
                        success: function (data) {
                            if (data.success==true) {
                                status = false;
                                $("#tel").attr("readonly", "readonly");
                                $("#getCode").css("background", "grey");
                                var msg = "成功发送验证码！请注意查收。 <label id='time'>60</label> 秒后可重新发送";
                                $("#msg_flag").html(msg);
                                $("#msg_flag").show();
                                var time = 60;
                                var timedCount = function timedCount() {
                                    $("#time").html(time);
                                    time = time - 1;
                                    if (time < 0) {
                                        clearInterval(i);
                                        $("#getCode").css("background", "#3399d5");
                                        status = true;
                                    }
                                }
                                var i = setInterval(timedCount, 1000);
                            } else {
                                //$("#getCode").css("background", "grey");
                                $("#msg_flag").html(data.errMsg);
                                $("#msg_flag").css("display", "block");
                            }
                        }
                    });
                } else {
                    alert("手机号格式错误！")
                }
            } else {
                alert("请输入手机号！")
            }
        }
    });
    //失去焦点事件
    $("#newPassword2").blur(function () {

    });
    $("#modifyButton").click(function () {
        var tel = $("#tel").val();
        var p1 = $("#newPassword1").val();
        var p2 = $("#newPassword2").val();
        var code = $("#code").val();
        if (p1 == p2) {
            $.ajax({
                url: "http://localhost:8080/merchantController/merchantForgetPassword",
                type: "post",
                dataType: "json",
                contentType: "application/x-www-form-urlencoded",
                data: {"telephone": tel, "mNewPassword": p2, "mCode": code},
                dataType:"json",
                success: function (data) {
                    console.log(typeof data);
                    console.log(data);
                    if (data.success) {
                        alert("修改成功!请重新登录!")
                        window.location.href = "http://localhost:8080/hotelManagement/loginPage";
                    } else {
                        alert(data.errMsg);
                    }
                },
                error: function () {
                    alert("访问错误！")
                }
            });
        } else {
            $("#msg2").css("display", "block");
            $("#msg2").html("输入的密码不一致！");
        }
    });
</script>
</body>
</html>
